<template>
  <div class="cart">
    <!-- 顶部 -->
    <van-nav-bar title="购物车" left-arrow @click-left='goback()' class="header" right-text="清空购物车"  @click-right="onClickRight"></van-nav-bar>
    <!-- 主要信息 -->
    <div class="content">
      <!-- 商品卡片 -->
      <van-swipe-cell class="fu_active" v-for="goods in goodslist" :key="goods.cartid">
        <van-card :price="goods.originprice*goods.num" :desc="goods.proname" class="goods-card" :thumb='goods.img1' />
        <!--加减按钮 -->
        <van-stepper v-model="goods.num" async-change @change="onChange(goods.num,goods.cartid)" theme="round"
          button-size="22" disable-input class="stepper" />
        <!-- 复选框 -->
        <van-checkbox v-model="goods.flag" class="active" @change="checkchange(goods.cartid,goods.flag)"></van-checkbox>
        <!-- 删除按钮 -->
        <template #right>
          <van-button square text="删除" type="danger" class="delete-button" @click="deleteMe(goods.cartid)" />
        </template>
      </van-swipe-cell>

      <!-- 中间栏 -->
      <van-divider :style="{ color: '#1989fa', borderColor: '#1989fa', padding: '0 16px' }">
        文字
      </van-divider>

      <!-- 可能你想要 -->
      <div class="guess">
        <ul>
          <li v-for="item in list" :key="item.proid" @click="goGoods(item.proid)">
            <img :src="item.img1" />
            <p>{{item.proname}}</p>
            <p>￥{{item.originprice}}</p>
          </li>
        </ul>
      </div>

    </div>
    <!-- 底部栏 -->
    <div class="footer">
      <van-submit-bar :price="price" button-text="结算">
        <van-checkbox v-model="checked" @change="changeCheckedAll(checked)">全选</van-checkbox>
      </van-submit-bar>
    </div>
  </div>

</template>
<script>
import { Dialog } from 'vant';

export default {

  data() {
    return {
      checked: true,
      goodslist: [],
      img: [],
      list: [],
      price: 100
    }
  },

  methods: {
    
    // 删除单条数据
    deleteMe(goodscartid) {
      this.$service({
        method: 'post',
        url: 'cart/remove',
        headers: {
          token: localStorage.getItem('token')
        },
        data: {
          cartid: goodscartid
        }
      })
        .then(res => {
          if (res.data.code == 200) {
            Dialog.confirm({
              message: '确认删除吗？',
            })
              .then(() => {
                window.location.reload()
              })
              .catch(() => {
                
              });
          }
        })
    },
    goback() {
      this.$router.back()
    },
    // 推荐转跳详情
    goGoods(proid) {
      this.$router.push('/goods?id=' + proid)
    },
   
    // 更新购物车数量
    // 价格
    onChange(goodsnum, goodscartid) {
      this.price = this.goodslist.reduce((num, item) => {
        if (item.flag) {
          num += item.num * item.originprice * 100
        }
        return num
      }, 0)
     
      // console.log('this.price', this.price);

      let token = localStorage.getItem('token')
      this.$service({
        method: 'post',
        url: 'cart/updatenum',
        headers: {
          token
        },
        data: {
          cartid: goodscartid,
          num: goodsnum
        }
      })
        .then(res => {
          if (res.data.code == 200) {
            console.log(res);
          }
        })
    },
    //更新当前购物车数据选择状态
    checkchange(goodscartid, goodsflag) {
      // 实现单选
      let res = this.goodslist.every(items => items.flag)
      if (res) {
        this.checked = true
        
      } else {
        this.checked = false
      }
      let token = localStorage.getItem('token')
      this.$service({
        method: 'post',
        url: 'cart/selectone',
        headers: {
          token
        },
        data: {
          cartid: goodscartid,
          flag: goodsflag
        }
      })
        .then(res => {
          if (res.data.code == 200) {
            console.log(res.data);
          }
        })
        .catch(err => {
          console.log('err', err);
        })
    },
    // 更新购物车所有数据状态
    changeCheckedAll(type) {
      // 全选功能
      if (type) {
        this.goodslist.forEach(items => { return items.flag = true })
      } else {
        this.goodslist.forEach(items => { return items.flag = false })
      }
      let token = localStorage.getItem('token')
      let userid = localStorage.getItem('userid')
      this.$service({
        method: 'post',
        url: 'cart/selectall',
        headers: {
          token
        },
        data: {
          userid: userid,
          type: type
        }
      })
        .then(res => {
          if (res.data.code == 200) {
            console.log('type', type);
            console.log(res);
          }
        })
        .catch(err => {
          console.log('err', err);
        })
    },
    // 清空购物车
    onClickRight(){
      this.$service({
        method:'post',
        url:'cart/removeall',
        headers:{
          token:localStorage.getItem('token')
        },
        data:{
          userid:localStorage.getItem('userid')
        }
      })
      .then(res=>{
        console.log(res);
        if(res.data.code==200){
          this.goodslist=[]  
        }  
      })
    }
  },
  created() {

    let token = localStorage.getItem('token')
    let userid = localStorage.getItem('userid')
    //查看购物车
    this.$service({
      method: 'post',
      url: 'cart/list',
      headers: {
        token: token
      },
      data: {
        userid
      }
    })
      .then(res => {
        if (res.data.code == 200) {
          let data = res.data.data
          this.goodslist = data
          this.price = this.goodslist.reduce((num, item) => {
        if (item.flag) {
          num += item.num * item.originprice * 100
        }
        return num
      }, 0)
        }
      })
      .catch(err => {
        console.log('err', err);
      })
    // 获取推荐列表
    this.$service(
      'pro/recommendlist'
    )
      .then(res => {
        if (res.data.code == 200) {
          this.list = res.data.data
        }
      })
    // 渲染总金额



  }
}
</script>
<style scoped>
.goods-card {
  margin: 0;
  background-color: white;
}

.delete-button {
  height: 100%;
}

.cart {
  height: 100%;
  display: flex;
  flex-direction: column;
}

.footer,
h2 {
  height: 5rem;
}

.content {
  flex: 1;
}

.goods-card {
  width: 340px;
  margin: 0 auto;
}

/* 商品卡片 */
.fu_active {
  position: relative;
  height: 8.75rem;
}

.active {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
}

.stepper {
  position: absolute;
  bottom: .625rem;
  right: .625rem;
}

/* 猜你喜欢 */
.guess {
  padding: 0 .625rem;
}

.guess ul {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
}

.guess ul li {
  width: 48%;
  display: flex;
  flex-direction: column;
}

.guess ul li img {
  width: 100%;
}

.guess ul li p:nth-child(3) {
  font-size: 1.25rem;
  color: #f66;
}

.guess ul li p:nth-child(2) {
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  text-overflow: ellipsis;
}
</style>